{% extends 'base/nav.html' %}

{% block title %}热度排行榜 - 旅游舆情监测{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h1><i class="fa fa-trophy text-warning"></i> {{ rank_title }}</h1>
                <p class="text-muted">基于评论数量、情感得分和用户互动计算的热度排名</p>
            </div>
        </div>
    </div>

    {% if attractions %}
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="thead-dark">
                                <tr>
                                    <th width="60">排名</th>
                                    <th>景点名称</th>
                                    <th>位置</th>
                                    <th>热度指数</th>
                                    <th>情感得分</th>
                                    <th>评论数量</th>
                                    <th>收藏次数</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for attraction in attractions %}
                                <tr>
                                    <td>
                                        <span class="badge badge-{% if forloop.counter == 1 %}warning{% elif forloop.counter == 2 %}secondary{% elif forloop.counter == 3 %}danger{% else %}info{% endif %}">
                                            {{ forloop.counter }}
                                        </span>
                                    </td>
                                    <td>
                                        <strong>
                                            <a href="{% url 'main:attraction_detail' attraction.pk %}">
                                                {{ attraction.name }}
                                            </a>
                                        </strong>
                                    </td>
                                    <td>{{ attraction.location }}</td>
                                    <td>
                                        <span class="badge badge-danger">
                                            <i class="fa fa-fire"></i> {{ attraction.heat_index }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge badge-{% if attraction.avg_sentiment_score > 0.1 %}success{% elif attraction.avg_sentiment_score < -0.1 %}danger{% else %}warning{% endif %}">
                                            {{ attraction.avg_sentiment_score|floatformat:2 }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge badge-primary">
                                            <i class="fa fa-comment"></i> {{ attraction.review_count }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge badge-info">
                                            <i class="fa fa-heart"></i> {{ attraction.collects.count }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if attraction.status == 'published' %}
                                            <span class="badge badge-success">已发布</span>
                                        {% elif attraction.status == 'draft' %}
                                            <span class="badge badge-secondary">草稿</span>
                                        {% else %}
                                            <span class="badge badge-warning">待审核</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="row">
        <div class="col-md-12">
            <div class="text-center py-5">
                <i class="fa fa-trophy fa-5x text-muted mb-3"></i>
                <h4 class="text-muted">暂无热度数据</h4>
                <p class="text-muted">当前没有景点数据或所有景点都未发布</p>
                
                <!-- 诊断信息 -->
                <div class="mt-4 p-3 bg-light rounded text-left" style="max-width: 500px; margin: 0 auto;">
                    <h6>可能的原因：</h6>
                    <ul class="text-muted">
                        <li>数据库中没有景点数据</li>
                        <li>景点状态不是"已发布"</li>
                        <li>热度指数字段为空或为0</li>
                    </ul>
                    
                    {% if user.is_authenticated and user.is_staff %}
                    <a href="{% url 'users:attractions_create' %}" class="btn btn-primary mt-2">
                        <i class="fa fa-plus"></i> 创建景点
                    </a>
                    <a href="{% url 'admin:main_touristattraction_changelist' %}" class="btn btn-outline-primary mt-2">
                        <i class="fa fa-cog"></i> 管理后台
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<style>
.table th {
    border-top: none;
    font-weight: 600;
}

.badge-warning {
    background: linear-gradient(135deg, #ffc107, #ff8f00);
}

.badge-danger {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.badge-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
}
</style>
{% endblock %}